<style lang="less">
@import "./home.less";
@import "../../styles/common.less";
</style>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
.app-index {
  border: 1px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  margin-top: 4px;
  font-size: 12px;
  color: #888;
  margin-right: 20px;
}
.app-container:nth-child(1) .app-index {
  background: gold;
  border: none;
  color: white;
}
.app-container:nth-child(2) .app-index {
  background: silver;
  border: none;
  color: white;
}
.app-container:nth-child(3) .app-index {
  background: chocolate;
  border: none;
  color: white;
}
.app-name {
  width: calc(32% - 20px);
}
.app-type {
  width: calc(43% - 10px);
}
.app-value {
  width: calc(25% - 10px);
}
.warning-name{
    width: calc(25% + 20px);
}
.warning-type{
    width: calc(50% - 10px);
}
.warning-value{
    width: calc(25% - 10px);
}
.app-table, .event-table{
    overflow-x: hidden;
}
</style>

<template>
    <div class="home-main" style="height: calc(100vh - 20px); overflow: hidden">
        <Row :gutter="11">
            <Col :md="16" :lg="16">
                <Row :gutter="6" style="height: 112px">
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="user_created_count"
                            :end-val="count.device"
                            iconType="android-desktop"
                            color="#2d8cf0"
                            :sub-text="count.device"
                            intro-text="设备"
                            percent
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="visit_count"
                            :end-val="count.plugin"
                            iconType="social-codepen-outline"
                            color="#64d572"
                            :iconSize="50"
                            :sub-text="count.plugin"
                            intro-text="插座"
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="collection_count"
                            :end-val="count.cost"
                            iconType="social-yen"
                            color="#ffd572"
                            :sub-text="count.cost"
                            intro-text="今日计费"
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="transfer_count"
                            :end-val="count.alert"
                            iconType="android-warning"
                            color="#f25e43"
                            :sub-text="count.alert"
                            intro-text="未处理故障"
                        ></infor-card>
                    </Col>
                </Row>
                <Row style="height: calc(60vh - 79.2px)" :gutter="6">
                    <Col :md="12" :lg="12">
                        <Card :padding="0">
                            <p slot="title" class="card-title">
                                <Icon type="iphone"></Icon>
                                设备类型
                            </p>
                            <div style="height: calc(60vh - 140.2px)">
                                <chart :options="deviceTypeOption" auto-resize></chart>
                            </div>
                        </Card>
                    </Col>
                    <Col :sm="12" :lg="12">
                        <Card :padding="0">
                            <p slot="title" class="card-title">
                                <Icon type="map"></Icon>
                                2
                            </p>
                            <div style="height: calc(60vh - 141px)">
                                
                            </div>
                        </Card>
                    </Col>
                </Row>
            </Col>
            <Col :md="8" :lg="8" style="height: calc(60vh + 32.8px)">
                <Row style=" margin-bottom: 10px;">
                    <Card :padding="0">
                        <p slot="title" class="card-title">
                            <Icon type="ios-clock-outline"></Icon>
                            开机时长
                        </p>
                        <div style="height: calc(30vh - 46px); padding: 12px; overflow-y: scroll" class="app-table">
                            <div v-for="item,index in AppList" class="app-container">
                                <div style="display: flex; justify-content: space-between; line-height: 2; padding: 0 24px">
                                    <span class="app-index">{{index+1}}</span>
                                    <span class="app-name" style=""><a>{{item.name}}</a></span>
                                    <span class="app-type">{{item.type}}</span>
                                    <span class="app-value">{{item.value}} H</span>
                                </div>
                            </div>
                        </div>
                    </Card>
                </Row>
                <Row>
                    <Card :padding="0">
                        <p slot="title" class="card-title">
                            <Icon type="android-warning"></Icon>
                            当前故障
                        </p>
                        <div style="height: calc(30vh - 46px); padding: 12px; overflow-y: scroll" class="event-table">
                            <div v-for="item,index in eventList" class="app-container">
                                <div style="display: flex; justify-content: space-between; line-height: 2; padding: 0 24px">
                                    <span class="warning-name" style=""><a :href="`#/event-check/${item.name}`">{{item.name}}</a></span>
                                    <span class="warning-type">{{item.type}}</span>
                                    <span class="warning-value" :style="{color: colorDict[item.priority]}">{{item.priority}}</span>
                                </div>
                            </div>
                        </div>
                    </Card>
                </Row>
            </Col>
        </Row>
        <Row :gutter="10" style="height: calc(40vh - 52.8px)">
            <Col :md="8" :lg="8" :style="{marginBottom: '10px'}">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="ios-pulse-strong"></Icon>
                        插座在线情况
                    </p>
                    <div style="height: calc(40vh - 120px)">
                        <chart :options="SNROption" auto-resize></chart>
                    </div>
                </Card>
            </Col>
            <Col :md="8" :lg="8" :style="{marginBottom: '10px'}">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="ios-pulse-strong"></Icon>
                        3
                    </p>
                    <div style="height: calc(40vh - 120px)">
                        <!-- <chart :options="radioTypeOption" auto-resize></chart> -->
                    </div>
                </Card>
            </Col>
            <Col :md="8" :lg="8">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-wifi"></Icon>
                        近三月报障数
                    </p>
                    <div style="height: calc(40vh - 120px)">
                        <chart :options="calendarOption" auto-resize></chart>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import { radioTypeOption } from "./data/pie/radio";
import { deviceTypeOption } from "./data/pie/client-type";
import { SNROption } from "./data/pie/SNR";
import { calendarOption } from "./data/pie/calendar";
import countUp from "./components/countUp.vue";
import inforCard from "./components/inforCard.vue";

export default {
  name: "home",
  components: {
    countUp,
    inforCard
  },
  data() {
    return {
      colorDict: { 高: "red", 中: "gold", 低: "forestgreen" },
      SNROption,
      radioTypeOption,
      deviceTypeOption,
      calendarOption,
      AppList: [
        { name: "D1381212", type: "核磁共振仪", value: 3814 },
        { name: "D1381213", type: "核磁共振仪", value: 1814 },
        { name: "D1381214", type: "核磁共振仪", value: 1431 },
        { name: "D1381215", type: "显微镜", value: 581 },
        { name: "D1381216", type: "显微镜", value: 580 },
        { name: "D1381217", type: "人工肺", value: 573 },
        { name: "D1381218", type: "人工肺", value: 12 },
      ],
      eventList: [
        { name: "D1381212", priority: "高", type: "无法连接蓝牙网关" },
        { name: "D1381213", priority: "高", type: "无法连接蓝牙网关" },
        { name: "D1381214", priority: "高", type: "无法连接蓝牙网关" },
      ],
      count: {
        device: 4719,
        portalStat: "99/100",
        plugin: 5912,
        aaaStat: "491/1000",
        cost: 1127831,
        DHCPStat: "9512/10000",
        alert: 1,
        DNSStat: "9318/10000"
      }
    };
  },
  computed: {
    avatorPath() {
      return localStorage.avatorImgPath;
    }
  },
  methods: {
    addNewToDoItem() {
      this.showAddNewTodo = true;
    },
    addNew() {
      if (this.newToDoItemValue.length !== 0) {
        this.toDoList.unshift({
          title: this.newToDoItemValue
        });
        setTimeout(() => {
          this.newToDoItemValue = "";
        }, 200);
        this.showAddNewTodo = false;
      } else {
        this.$Message.error("请输入待办事项内容");
      }
    },
    cancelAdd() {
      this.showAddNewTodo = false;
      this.newToDoItemValue = "";
    }
  }
};
</script>
